<!-- 教师端后台管理系统 -->

<template>
  <el-container style="height: 100%">
    <el-aside :width="sideWidth + 'px'" style="height: 100%;box-shadow: 1px 0 6px rgb(0 21 41 / 35%)">
      <Aside :menuTextIsShow="menuTextIsShow" :logoTextIsShow="logoTextIsShow"/>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #ccc">
        <Header :menuBtn="menuBtn" :collapse="collapse"/>
      </el-header>

      <el-main style="padding: 15px;">
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'System_TeaBackend',
  components: {
    Aside,
    Header
  },
  data() {
    return {
      // 菜单展开按钮
      menuBtn: 'el-icon-s-unfold',
      // 菜单文字
      menuTextIsShow: true,
      // 左侧菜单区域
      sideWidth: 65,
      // 图标文字
      logoTextIsShow: false,
    }
  },
  methods: {
    collapse() {
      let val = localStorage.getItem('lang')

      this.menuTextIsShow = !this.menuTextIsShow
      // 收缩
      if (this.menuTextIsShow) {
        this.sideWidth = 65
        this.menuBtn = 'el-icon-s-unfold'
        this.logoTextIsShow = false
      }
      // 展开
      else {
        this.sideWidth = 200
        if (val === 'English' || val === 'German') {
          this.sideWidth = 300
        } else if (val === 'Japanese') {
          this.sideWidth = 250
        } else if (val === 'Chinese' || val === 'Korean') {
          this.sideWidth = 200
        }else if(val === 'Russian' || val === 'French'){
          this.sideWidth = 360
        }
        this.menuBtn = 'el-icon-s-fold'
        this.logoTextIsShow = true
      }
    }
  }
}
</script>